<template>
  <div>
    <el-row class="topbar">
      <el-col :span="2" :offset="1" class="logo">
        <router-link to="/" class="logo-png"><img src="../../assets/logo.png" style="width: 25px"/></router-link>
      </el-col>
      <el-col :md="{span: 10, offset: 9}" :sm="{span: 14, offset: 5}" :xs="{span: 18, offset: 0}">
        <el-row class="el-menu-demo">
            <!-- <el-col :span=""><router-link to="/"><div>首页</div></router-link></el-menu-item> -->
            <router-link to="/article"><el-col :span="6" class="el-menu-col">帖子</el-col></router-link>
            <router-link to="/leavemsg"><el-col :span="6" class="el-menu-col">留言</el-col></router-link>
            <router-link to="/updateLog"><el-col :span="6" class="el-menu-col">日志</el-col></router-link>
            <router-link to="/about"><el-col :span="6" class="el-menu-col">关于</el-col></router-link>
        </el-row>
      </el-col>
      <router-link :to="this.isLogin ? '/space' : '/login'">
        <el-col :span="1" :xs="{span: 2, offset: 0}">
          <div v-if="!this.isLogin" class="icon-box">
            <i class="el-icon-user-solid icon"></i>
          </div>
          <div v-if="this.isLogin" class="icon-box">
            <el-avatar size="medium" :src="'http://www.liujn.top/bbs/api' + this.userAvatar" class="avatar"></el-avatar>
          </div>
        </el-col>
      </router-link>
      <el-col :span="2"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Topbar",
  data() {
    return {
      isLogin: false,
      userAvatar: this.$cookies.get("UserAvatar")
    };
  },
  methods: {
    isLogin_cookie() {
      this.isLogin = this.$cookies.isKey("CookieId")
    }
  },
  mounted() {
    this.isLogin_cookie()
  }
};
</script>

<style scoped>

  .topbar {
    background-color: #fff;
    height: 61px
  }

  .logo {
    height: 100%;
    display: flex;
  }

  .logo-png {
    line-height: 20%;
    align-self: center;
    margin: 0 auto
  }

  .icon-box {
    height: 60px;
    display: flex;
  }

  .icon {
    font-size: 25px;
    margin: 0 auto;
    align-self: center;
  }

  a:link, a:visited {
    text-decoration:none;
    color: #909399;
  }

  .avatar {
    align-self: center;
    width: 35px;
    height: 35px;
  }

  .el-menu-demo {
    height: 61px;
    width: 100%;
  }

  .el-menu-col {
    height: 61px;
    line-height: 61px;
  }
</style>